﻿@using Rail.Net.Common.Resources

@*<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">*@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@ViewBag.Title</title>
    <link rel="shortcut icon" href="@Url.Content("~/Content/images/favicon.png")" type="image/x-icon" />

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    @* DataTable CSS *@
    <link type="text/css" href="@Url.Content("~/Content/demo_table_jui.css")" rel="stylesheet" />
    <link type="text/css" href="@Url.Content("~/Content/TableTools_JUI.css")" rel="stylesheet" />

    
    @* Awesome framework - http://awesome.codeplex.com/*@   
    <link type="text/css" href="@Url.Content("~/Content/Awesome.css")" rel="stylesheet" />    

    @* Jquery and related plugins *@
    <link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/jquery-ui-1.8.14.custom.css")" />	


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>    
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.ba-bbq.min.js")"></script>

    <script type="text/javascript" src="@Url.Content("~/Scripts/json2.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/underscore-min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/backbone-min.js")"></script>

    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.dataTables.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/TableTools.min.js")"></script>
    
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.form.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/Awesome.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/style.min.js")"></script>


    <script type="text/javascript">
        $(function () {
            var tabs = $('.tabs');
            var tabASelector = 'ul.ui-tabs-nav a';
            tabs.tabs({event: 'change' });

            tabs.find(tabASelector).click(function () {
                var state = {};

                // Get the id of this tab widget.
                var id = $(this).closest('.tabs').attr('id');

                var tabLabel = $(this).attr('href').substring(1);

                // Get the index of this tab.
                //var tabIndex = $(this).parent().prevAll().length;

                // set the document title based on the selected tab
                var tabTitle = $(this).attr('title');
                document.title = 'eRailnet - ' + tabTitle;

                // Set the state!
                state[id] = tabLabel;
                $.bbq.pushState(state);
            });

            $(window).bind('hashchange', function (e) {

                // Iterate over all tab widgets.
                tabs.each(function () {
                    //var tabIndex = e.getState(this.id, true) || 0;
                    var tabLabel = e.getState(this.id) || '';
                    if (tabLabel != '') {
                        $('a[href="#' + tabLabel + '"]').triggerHandler('change');
                    }
                    else {
                        $('a[href="#selection"]').triggerHandler('change');
                    }
                    

                    //$(this).find(tabASelector).eq(tabIndex).triggerHandler('change');
                });
            });

            $(window).trigger('hashchange');
        });
        
        
    </script>    
</head>

<body>    
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>
                    <a href="@Request.RawUrl">
                        <img src="@Url.Content("~/Content/images/logo.png")" alt="Logo" />
                    </a>
                </h1>
                <div id="language">
                    @Html.Partial("CulturePartial")
                </div>                
            </div>            
        </div>

        <div id="main">
            <div id="tabs" class="tabs">
	            <ul>
		            <li><a href="#selection" title="@Global.Main_BreadCrumb_Selection"><img style="width: 32px; border: 0px;" src="@Url.Content("~/Content/images/selection_icon.png")" alt="@Global.Main_BreadCrumb_Selection" /> @Global.Main_BreadCrumb_Selection</a></li>
		            <li><a href="#offers" title="@Global.Main_BreadCrumb_Offers"><img style="width: 32px; border: 0px;" src="@Url.Content("~/Content/images/offers_icon.png")" alt="@Global.Main_BreadCrumb_Offers" />@Global.Main_BreadCrumb_Offers</a></li>
                    <li><a href="#client-data" title="@Global.Main_BreadCrumb_ClientData"><img style="width: 32px; border: 0px;" src="@Url.Content("~/Content/images/client_data_icon.png")" alt="@Global.Main_BreadCrumb_ClientData" />@Global.Main_BreadCrumb_ClientData</a></li>
                    <li><a href="#payment" title="@Global.Main_BreadCrumb_Payment"><img style="width: 32px; border: 0px;" src="@Url.Content("~/Content/images/payment_icon.png")" alt="@Global.Main_BreadCrumb_Payment" />@Global.Main_BreadCrumb_Payment</a></li>
                    <li><a href="#ticket" title="@Global.Main_BreadCrumb_Ticket"><img style="width: 32px; border: 0px;" src="@Url.Content("~/Content/images/ticket_icon.png")" alt="@Global.Main_BreadCrumb_Ticket" />@Global.Main_BreadCrumb_Ticket</a></li>
	            </ul>
                <div id="selection" class="tab-content">                    
                    @RenderBody()
                </div>
                <div id="offers" class="tab-content">
                    <div id="offers-content">
                        @RenderSection("Offers", false)
                    </div>
                </div>
                <div id="client-data" class="tab-content">
                    <div id="client-data-content">
                        @RenderSection("ClientData", false)
                    </div>
                </div>
                <div id="payment" class="tab-content">
                    <div id="payment-content">
                        @RenderSection("Payment", false)
                    </div>
                </div>
                <div id="ticket" class="tab-content">
                    <div id="ticket-content">
                        @RenderSection("Ticket", false)
                    </div>
                </div>
            </div>
            <div id="footer">
            </div>
        </div>
    </div>

    <div id="loading" style="display: none;">
        <p>
            <img src="@Url.Content("~/Content/images/ajax-loader.gif")" alt="ajax-loading" />
        </p>
        <p>
            <img src="@Url.Content("~/Content/images/railjet.jpg")" alt="train-loading" />
        </p>
    </div>
</body>
</html>
